---
title: useChat Hook Integration (Legacy)
---

## Overview

Integration with the Vercel AI SDK UI's `useChat` hook.  
It allows integration with OpenAI, Anthropic, Mistral, Perplexity, AWS Bedrock, Azure, Google Gemini, Hugging Face, Fireworks, Cohere, LangChain, Replicate, Ollama, and more.

## Getting Started

import { Steps, Step } from "fumadocs-ui/components/steps";

<Steps>
  <Step>
  ### Create a Next.JS project

```sh
npx create-next-app@latest my-app
cd my-app
```

  </Step>
  <Step>

### Install Vercel AI SDK and `@assistant-ui/react`

```sh npm2yarn
npm install @assistant-ui/react @assistant-ui/react-ai-sdk ai @ai-sdk/openai
```

  </Step>
  <Step>

### Setup a backend route under `/api/chat`

`@/app/api/chat/route.ts`

```tsx
import { openai } from "@ai-sdk/openai";
import { streamText } from "ai";

export const maxDuration = 30;

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: openai("gpt-4o"),
    messages: convertToCoreMessages(messages),
  });

  return result.toDataStreamResponse();
}
```

  </Step>
  <Step>

### Define a `MyRuntimeProvider` component

`@/app/MyRuntimeProvider.tsx`

```tsx
"use client";

import { useChat } from "@ai-sdk/react";
import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useVercelUseChatRuntime } from "@assistant-ui/react-ai-sdk";

export function MyRuntimeProvider({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const chat = useChat({
    api: "/api/chat",
  });

  const runtime = useVercelUseChatRuntime(chat);

  return (
    <AssistantRuntimeProvider runtime={runtime}>
      {children}
    </AssistantRuntimeProvider>
  );
}
```

  </Step>
  <Step>

### Wrap your app in `MyRuntimeProvider`

`@/app/layout.tsx`

```tsx {1,11,17}
import { MyRuntimeProvider } from '@/app/MyRuntimeProvider';

...

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <MyRuntimeProvider>
      <html lang="en">
        <body className={inter.className}>
          {children}
        </body>
      </html>
    </MyRuntimeProvider>
  )
}
```

  </Step>
</Steps>

## Accessing AI SDK Messages

You can use the `getExternalStoreMessages` utility to convert `ThreadMessage`s back to `Message`s from AI SDK.

```tsx
const MyAssistantMessage = () => {
  const aiSDKMessages = useMessage((m) => getExternalStoreMessages(m));
  // ...
};

const WeatherToolUI = makeAssistantToolUI({
  render: () => {
    const aiSDKMessage = useContentPart((p) => getExternalStoreMessages(p)[0]);
    // ...
  },
});
```